<template>
    <div class="underline-text">
        <div class="content">
            <h1>Lorem ipsum</h1>
            <article class="article">
                <p class="paragraph">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non rhoncus leo. Cras vel maximus
                    ex. Sed eu accumsan massa, vel consectetur leo. Aliquam lobortis consectetur neque, at maximus lacus
                    efficitur at. Nulla porttitor, risus vitae pharetra tincidunt, felis purus cursus dui, ac mollis
                    lacus quam at mi. Curabitur tempus nunc et lorem sagittis vestibulum. Mauris id nisi gravida,
                    sodales massa a, facilisis sapien. Integer convallis nunc non magna fermentum fringilla. Fusce
                    suscipit elit in hendrerit semper.
                    <mark v-intersection-observer="markIntersectionObserver">
                        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce
                        cursus placerat elit et molestie.</mark
                    >
                    Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla laoreet
                    quam risus, non dapibus risus malesuada dapibus. Nunc cursus elit libero, cursus placerat nulla
                    luctus hendrerit. Maecenas lectus lorem, pulvinar sit amet sapien vitae, sollicitudin elementum
                    nibh.";
                </p>
                <p class="paragraph">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non rhoncus leo. Cras vel maximus
                    ex. Sed eu accumsan massa, vel consectetur leo. Aliquam lobortis consectetur neque, at maximus lacus
                    efficitur at.
                    <mark v-intersection-observer="markIntersectionObserver"
                        >Nulla porttitor, risus vitae pharetra tincidunt, felis purus cursus dui, ac mollis lacus quam
                        at mi.</mark
                    >
                    Curabitur tempus nunc et lorem sagittis vestibulum. Mauris id nisi gravida, sodales massa a,
                    facilisis sapien. Integer convallis nunc non magna fermentum fringilla. Fusce suscipit elit in
                    hendrerit semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                    mus. Fusce cursus placerat elit et molestie. Orci varius natoque penatibus et magnis dis parturient
                    montes, nascetur ridiculus mus.
                    <mark v-intersection-observer="markIntersectionObserver">Nulla laoreet quam risus</mark>, non
                    dapibus risus malesuada dapibus. Nunc cursus elit libero, cursus placerat nulla luctus hendrerit.
                    Maecenas lectus lorem, pulvinar sit amet sapien vitae, sollicitudin elementum nibh.";
                </p>
                <p class="paragraph">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non rhoncus leo. Cras vel maximus
                    ex. Sed eu accumsan massa, vel consectetur leo. Aliquam lobortis consectetur neque, at maximus lacus
                    efficitur at.
                    <mark v-intersection-observer="markIntersectionObserver"
                        >Nulla porttitor, risus vitae pharetra tincidunt,</mark
                    >
                    felis purus cursus dui, ac mollis lacus quam at mi. Curabitur tempus nunc et lorem sagittis
                    vestibulum. Mauris id nisi gravida, sodales massa a, facilisis sapien. Integer convallis nunc non
                    magna fermentum fringilla. Fusce suscipit elit in hendrerit semper. Orci varius natoque penatibus et
                    magnis dis parturient montes, nascetur ridiculus mus.
                    <mark v-intersection-observer="markIntersectionObserver"
                        >Fusce cursus placerat elit et molestie. Orci varius natoque penatibus et magnis dis parturient
                        montes, nascetur ridiculus mus.</mark
                    >
                    Nulla laoreet quam risus, non dapibus risus malesuada dapibus. Nunc cursus elit libero, cursus
                    placerat nulla luctus hendrerit. Maecenas lectus lorem, pulvinar sit amet sapien vitae, sollicitudin
                    elementum nibh.";
                </p>
            </article>
        </div>
    </div>
</template>

<script setup lang="ts">
// 当划线元素进入视口时，执行划线动画
import { vIntersectionObserver } from "@vueuse/components";

const markIntersectionObserver = ([{ isIntersecting, target }]: IntersectionObserverEntry[]) => {
    if (isIntersecting) {
        target.classList.add("mark-animation");
    }
};
</script>

<style scoped lang="scss">
.underline-text {
    font-family: Helvetica, Arial, sans-serif;
    color: #333333;
    .content {
        width: 60%;
        margin: auto;
        h1 {
            margin: 8rem 0 3rem;
            overflow: auto;
            font-size: 3rem;
            font-weight: 700;
        }
        .article {
            .paragraph {
                margin-bottom: 3rem;
                font-size: 1.3rem;
                line-height: 2.2rem;

                /* 两端对齐 */
                text-align: justify;
                letter-spacing: 0.01rem;
                mark {
                    /* 1. text-underline：可以文字下划线，可是实现线条无法与文字重合 */

                    /* text-decoration: underline;
                    text-decoration-thickness: 0.3rem;
                    text-decoration-color: sandybrown; */
                    background-color: transparent;

                    /* 2. 盒子内阴影：线条和重叠文字，但是无法做动画，画线条的效果 */

                    /* box-shadow: inset 0 -0.6rem 0 sandybrown; */

                    /* 3. 背景图来实现 */
                    background-image: linear-gradient(#00ffff, #00ffff);
                    background-repeat: no-repeat;
                    background-position: 0 100%;

                    /* background-size: 100% 30%;  修改横向背景图大小的百分比实现划线的动画 */
                    background-size: 0 30%;
                    &.mark-animation {
                        animation: underline-text 2s ease-in-out forwards;

                        @keyframes underline-text {
                            to {
                                background-size: 100% 30%;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
